<template>
  <div class="table-containner">
    <div class="tableTop">
      <el-form :inline="true"  class="demo-form-inline"  size="mini" >
        <el-form-item label="出厂编号:">
          <el-input v-model="equipPid"></el-input>
        </el-form-item>
        <el-form-item label="名称:">
          <el-select v-model="equipName" clearable placeholder="请选择">
            <el-option
              v-for="item in nameoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select v-model="equipType" clearable placeholder="所有类型">
            <el-option
              v-for="item in cranetypeoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌:">
          <el-select v-model="equipBrand" clearable placeholder="请选择">
            <el-option
              v-for="item in brandoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item  style="margin-right: 6px">
          <el-button type="primary" @click="equipSearch()">查询</el-button>
          <!--<el-button type="info" >高级查询</el-button>-->
        </el-form-item>
        <el-form-item style="float: right">
          <!--<el-button type="primary" @click="addJump()" >新增</el-button>-->
          <!--<el-button class="theButton" type="primary"  >导入</el-button>-->
          <!--<el-button class="theButton" type="primary"  >导出</el-button>-->
        </el-form-item>
      </el-form>
    </div>
    <div  class="configtableList">
      <el-table
        :data="tableData"
        border
        stripe border fit highlight-current-row
        style="width: 100%; max-height: 585px; overflow-y: auto"
        height="585"
        :header-cell-style="{background:'#D8DEE8',height: '20px',padding:'5px 0px'}"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60px"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          :width="column.width"
          :show-overflow-tooltip="true"
          :sortable="column.sortable"
        >
        </el-table-column>
        <el-table-column
          type="index"
          label="操作"
          width="130px"
        >
          <template slot-scope="scope">
            <el-button @click.native.prevent="detailview(scope.$index, scope.row)" class="tableIcon" title="查看" type="text">
              <i class="iconColor"><img src="../../../assets/heartbreak/detail.png"></i>
            </el-button>
            <!--<el-button @click.native.prevent="redactview(scope.$index, scope.row)" class="tableIcon" title="编辑" type="text">-->
              <!--<i class="iconColor"><img src="../../../assets/heartbreak/redact.png"></i>-->
            <!--</el-button>-->
            <!--<div class="equipDelete">-->
              <!--<el-button  type="text" class="" title="删除" @click.native.prevent="deleteEquip(scope.$index, scope.row)">-->
                <!--<img :src="wraningDelete" alt="删除"/>-->
              <!--</el-button>-->
            <!--</div>-->
            <!--<orgdelete></orgdelete>-->
            <el-dropdown trigger="click" class="overviewDropdown">
              <span class="el-dropdown-link">
                更多操作<i class="el-icon-caret-bottom"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <!--<el-button class="associatedbuttom" type="button" >统计数据</el-button>——————-->
                <el-button class="associatedbuttom" type="button" @click.native.prevent="realtimejump(scope.$index, scope.row)">实时监测</el-button>——————
                <el-button class="associatedbuttom" type="button" @click.native.prevent="contrastjump(scope.$index, scope.row)" >设备对比</el-button>
                <!--<el-button class="associatedbuttom" type="button" >切换显示模式</el-button>-->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container footerPage">
        <el-pagination
          @current-change="CurrentChange"
          @size-change="SizeChange"
          :page-sizes="[5, 10, 20, 50]"
          background layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  import orgdelete from '@/views/managementSide/mSiteAdmin/components/delete'
  import wraningDelete from '@/assets/components/wraningDelete.png'

  export default {
    components: {
      orgdelete
    },
    data() {
      return {
        wraningDelete,
        // 查询条件
        equipPid: '',
        equipName: '',
        equipBrand: '',
        equipType: '',
        equipClass: '',
        updateDialogShow: false,
        viewEquipInfoShow: false, // 查看设备信息
        debugShow: false, // 调试
        cols: [
          { prop: 'equip_cid', label: '出厂编号', width: '160px', sortable: true },
          { prop: 'name_label', label: '名称', width: '140px', sortable: true },
          { prop: 'brand_label', label: '品牌', width: '190px', sortable: true },
          { prop: 'type_label', label: '类型', width: '120px', sortable: true },
          { prop: 'model', label: '型号', width: '170px', sortable: true },
          { prop: 'work_level_label', label: '工作级别', sortable: true },
          { prop: 'lifting_rated[0].weight', label: '额定起重量', width: '120px', sortable: true },
          { prop: 'manufacturer', label: '生产商', width: '200px', sortable: true },
          { prop: 'install_position', label: '安装位置', sortable: true }
        ],
        tableData: [],
        indexMethod: '',
        total: 0,
        // 换页
        siteListQuery: {
          page: 1,
          limit: 20,
          importance: undefined,
          title: undefined,
          type: undefined,
          sort: '+id'
        },
        // 获取rows所需信息
        thePid: '',
        theName: '',
        theProjectName: '',
        theStatus: '',
        theType: '',
        // 下拉框
        nameoptions: [],
        // classoptions: [],
        cranetypeoptions: [],
        brandoptions: [],
        // 获取起重机名称
        nameselectTable: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_crane_name'
        },
        //        // 获取起重机分类
        //        classselectTable: {
        //          access_token: 'access_tokenxxxxxxxx',
        //          type: 'equip_get_class'
        //        },
        // 获取起重机类型
        cranetypeselectTable: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_crane_type'
        },
        // 获取起重机品牌
        brandselectTable: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_crane_brand'
        },
        // 总览接口
        equipDataTable: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_get_condition',
          data: {
            condition: {
              cid: '',
              equip_cid: '',
              name: '',
              brand: '',
              equip_class: '',
              type: ''
            },
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        // 删除
        delSubmitData: {
          access_token: localStorage.getItem('access_token'),
          type: 'equip_del',
          ids: []
        },
        // 设备获取站点
        getStationPid: {
          access_token: localStorage.getItem('access_token'),
          type: 'station_get_by_cid',
          cid: ''
        }
      }
    },
    mounted() {
      this.equipData()
      // this.classselect()
      this.nameselect()
      this.brandselect()
      this.cranetypeselect()
    },
    methods: {
      toJSON() {},
      // 换页
      handleSizeChange(val) {
        this.siteListQuery.limit = val
        this.gettableData()
      },
      handleCurrentChange(val) {
        this.siteListQuery.page = val
        this.tableData()
      },
      // 查询条件
      equipSearch() {
        this.equipDataTable.data.condition.equip_cid = this.equipPid
        this.equipDataTable.data.condition.name = this.equipName
        this.equipDataTable.data.condition.type = this.equipType
        this.equipDataTable.data.condition.brand = this.equipBrand
        this.equipData()
      },
      // 新增页面跳转
      addJump() {
        this.$router.push({
          path: '/equipManagement/components/addequip'
        })
      },
      // 获取起重机名称
      nameselect() {
        axios.post('/basicdata', this.nameselectTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.nameoptions = res.data.datas
          console.log(res.data.datas)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取起重机分类
      cranetypeselect() {
        axios.post('/basicdata', this.cranetypeselectTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.cranetypeoptions = res.data.datas
          console.log(res.data.datas)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 获取起重机品牌
      brandselect() {
        axios.post('/basicdata', this.brandselectTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.brandoptions = res.data.datas
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 总览接口
      equipData() {
        axios.post('/equipmanage', this.equipDataTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.tableData = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
          // console.log(this.tableData)
          console.log(this.tableData)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 跳转查看
      detailview(index, rows) {
        console.log(rows)
        var equipCid = rows.cid
        this.$router.push({
          path: '/equipManagement/components/equipdetail',
          query: {
            cid: equipCid
          }
        })
        console.log(this.$route.query.cid)
      },
      // 跳转编辑
      redactview(index, rows) {
        console.log(rows)
        var equipCid = rows.cid
        this.$router.push({
          path: '/equipManagement/components/redactequip',
          query: {
            cid: equipCid
          }
        })
        console.log(this.$route.query.cid)
      },
      // 跳转对比
      contrastjump(index, rows) {
        var equipCid = rows.cid
        window.localStorage.setItem('Cid', equipCid) // 设备编号
        this.$router.push({
          path: '/equipManagement/components/equipcontrast',
          query: {
            cid: equipCid
          }
        })
        console.log(rows)
        console.log(this.$route.query.cid)
      },
      // 跳转实时
      realtimejump(index, rows) {
        console.log(rows)
        this.getStationPid.cid = rows.cid
        this.theName = rows.name
        axios.post('/station', this.getStationPid, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.thePid = res.data.data.pid
          this.QZnumber = res.data.data.crane_id
          for (var j = 0; j < res.data.data.cids.length; j++) {
            if (res.data.data.cids[j].indexOf('plc') !== -1) {
              this.plcNumber = res.data.data.cids[j]
            }
          }
          this.theProjectName = res.data.data.project_name
          this.theStatus = res.data.data.status
          this.theType = res.data.data.type
          console.log(this.theProjectName)
          console.log(this.theStatus)
          console.log(this.theType)
          console.log(this.QZnumber)
          console.log(res)
          this.realjump()
        })
          .catch((error) => {
            console.log(error)
            if (error.data.errcode === '00001') {
              this.$message({
                type: 'info',
                message: '该设备未匹配站点'
              })
            }
          })
      },
      // 跳转实时
      realjump() {
        var equipCid = this.thePid
        var equipName = this.theName
        var equipProjectName = this.theProjectName
        var equipStatus = this.theStatus
        var equipType = this.theType
        this.$router.push({
          path: '/monitor/homepage/grab',
          query: {
            cid: equipCid
          }
        })
        window.localStorage.setItem('num', equipCid) // 站点编号
        window.localStorage.setItem('Cid', this.QZnumber) // 设备编号
        window.localStorage.setItem('name', equipName) // 站点编号
        window.localStorage.setItem('plc', this.plcNumber) // 网关
        window.localStorage.setItem('proname', equipProjectName) // 项目名称
        window.localStorage.setItem('status', equipStatus) // 设备状态
        window.localStorage.setItem('type', equipType) // 设备类型
      },

      // 单个删除
      deleteEquip(index, rows) {
        var deleteid = []
        console.log(rows)
        deleteid.push(rows.cid)
        console.log(deleteid)
        this.delSubmitData.ids = deleteid
        console.log(deleteid)
        this.$confirm('确认删除设备？', '提示', {
          cancelButtonClass: 'userCancel',
          confirmButtonClass: 'userConfirm',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log()
          axios.post('/equipmanage', this.delSubmitData, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.equipData()
          })
            .catch((error) => {
              console.log(error)
              this.$message({
                type: 'error',
                message: error.data.errmsg
              })
            })
        }).catch(() => {
        })
      },
      // 当前页
      CurrentChange(val) {
        this.equipDataTable.data.page.page_number = (val) + ''
        this.equipData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.equipDataTable.data.page.page_size = (pageSize) + ''
        this.equipData()
      }
    }
  }
</script>
<style scoped>
  .table-containner {
    min-width: 1546px;
    min-height: 500px;
  }
  .tableTop {
    width: 100%;
    min-height: 50px;
    background-color: #F0F3F5;
    font-size:14px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(105,114,126,1);
    line-height: 20px;
    padding: 12px 20px 0px 20px;
  }
  .configtableList{
    width: 100%;
    min-height:20vw;

  }
  .footerPage{
    float: right;
    right: -10px;
    top: 5px;
    position: relative;
  }
  /**********搜索栏样式修改***********/
  /deep/ .el-form-item--mini.el-form-item{
    margin-bottom: 12px;
  }
  /deep/ .theButton {
    margin-left: 5px !important;
  }
  /***********************操作列样式**************************/
  /deep/ .tableIcon {
    padding: 0px;
    font-size: 20px;
    font-weight: 500;
  }
  /deep/ .el-button+.el-button{
    margin-left: 3px;
  }
  .iconColor{
    color: #25B7C8;
  }
  /deep/ .equipDelete {
    display: inline-block;
  }
  /deep/ .overviewDropdown {
    width:74px;
    margin-left: 5px;
    top: -4px;
    cursor: pointer;
  }
  /deep/ .el-dropdown-link {
    border: 2px solid;
    border-right: 0px;
    border-right: 4px solid;
    font-size: 10px;
    padding:2px;
    color: #52C8A1;
  }
  .el-popper[x-placement^="bottom"] {
    margin-top: 12px;
    width: 98px;
    color: #e0e0e0;
  }
  /deep/ .associatedbuttom {
    text-align: left;
    color: #323842;
    border: none;
    margin-left: 5px;
    padding: 10px;
    height: 24px;
    width: 88px;
    font-size: 12px;
  }
  /deep/ .associatedbuttom:hover {
    background: #c7f9e6;
    color: #2bbc8c;
  }
  /**********表格**********/
  /deep/ .el-table td{
    padding: 12px 0 !important;
  }
</style>
